<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{margin:0;padding:0;color:#333;}
        .clearfix:after{content:".";display:block;clear:both;visibility:hidden;overflow:hidden;height:0;}
        .clearfix{zoom:1;}
        .head{width:100%;height:71px;background:#5f92c7;}
        .h-content{margin:0 auto;width:970px;}
        .h-content .hc-logo{float:left;padding-top:5px;}
        .h-content .hc-logo img{font-size:0;}
        .h-content .hc-icon{float:right;}
        .main{margin:20px auto 0;padding-bottom:30px;width:970px;}
        .main-body{padding:10px 28px 0;width:912px;border:1px solid #dbdbdb;}
        .m-topright{padding:5px 0;}
        .m-topright span{font-size:12px;float:right;}
        .m-topright span a{color:#f00;}
        .m-content .mc-top h1{padding-bottom:10px;font-size:28px;border-bottom:1px  dashed #dbdbdb;}
        .m-content .mc-top h1 span{font-size:12px;color:#bfbfbf;}
        .m-content .mc-infor{padding:5px 0;}
        .m-content .mc-infor label{display:inline-block;width:100px;}
        .m-content .mc-infor label span{color:#f00;}
        .m-content .mc-infor label.gender{width:20px;padding:2px;}
        .m-content .mc-infor input[type='text']{height:35px;line-height:35px;width: 380px;overflow:hidden;padding-right:28px;text-overflow:ellipsis;white-space:nowrap;}
        .m-content .mc-infor select{height:40px;line-height:40px;width: 412px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
        .m-content .mc-bottom,#mc-submit{margin-left:100px;margin-top:10px;}
        .m-content .mc-bottom a{color:#f00;}
        #mc-submit{display:block;width:418px;height:45px;line-height:45px;background:#5f92c7;color:#fff;border:none;font-size:16px;font-weight: bold;border-radius:3px;}
    </style>
</head>
<body>
    <div class="head">
        <div class="h-content clearfix">
            <a class="hc-logo" href=""><img src="imgs/logo.gif" alt=""></a>
            <img class="hc-icon" src="imgs/ad.gif" alt="">
        </div>
    </div>
    <div class="main">
        <div class="m-topright clearfix">
            <span>已经是会员了？现在就<a href="http://ehr.goodjobs.cn">登录</a></span>
        </div>
        <div class="main-body">
            <div class="m-content">
                <form method="post" id="corpForm" action="http://ehr.goodjobs.cn/dispatcher.php/action/BasicInfo">
                    <div class="mc-top">
                        <h1> 企业会员申请<span>（资料提交成功后，客服人员将在1小时内与您联系。） </span></h1>
                    </div>
                    <div>
                        <div class="mc-infor">
                            <label for="inforcompany"><span>* </span>企业名称</label>
                            <input id="inforcompany" type="text" placeholder="请输入与公司营业执照一致的公司名称">
                            <span></span>
                        </div>
                         <div class="mc-infor">
                            <label for="mc-hangye"><span>* </span>所属行业</label>
                            <select name="" id="mc-hangye">
                                <option value="">请选择</option>
                                <option value="">互联网</option>
                                <option value="">贸易</option>
                                <option value="">园林</option>
                                <option value="">销售</option>
                                <option value="">人事</option>
                            </select>
                        </div>
                         <div class="mc-infor">
                            <label for="inforaddress"><span>* </span>详细地址</label>
                            <input id="inforaddress" type="text">
                            <span></span>
                        </div>
                         <div class="mc-infor">
                            <label for="inforfamily"><span>* </span>联系人</label>
                            <input id="inforfamily" type="text">
                            <input type="radio" name="gender" id="male"><label class="gender" for="male">男</label>
                            <input type="radio" name="gender" id="female"><label class="gender" for="female">女</label>
                            <span></span>
                        </div>
                         <div class="mc-infor">
                            <label for="infornumber"><span>* </span>联系电话</label>
                            <input type="text" placeholder="区号" style="width:98px;margin-right:8px;padding-right:10px;"><input type="text" placeholder="电话号码" style="width:178px;margin-right:8px;padding-right:10px;"><input type="text" placeholder="分机号" style="width:78px;padding-right:10px;"><br/>
                            <input id="inforphoneNum" type="text" placeholder="手机号码" style="margin-top:10px;margin-left:104px;"><span></span>
                        </div>
                         <div class="mc-infor">
                            <label for="inforQQ"><span style="visibility:hidden;">* </span>QQ号码</label>
                            <input id="inforQQ" type="text">
                        </div>
                         <div class="mc-infor" >
                            <label for="mci-job" style="height:102px;line-height:102px;vertical-align:middle"><span>* </span>招聘职位</label>
                            <textarea name="" id="mci-job" style="width:390px;height:80px;padding: 10px;color: rgb(169, 169, 169);vertical-align:middle;" placeholder="100字以内"></textarea><span>当前字数为0</span>
                        </div>
                         <div class="mc-bottom">
                            <input id="inforcheck" type="checkbox">
                            <label for="inforcheck"><span> 我已阅读并同意新安人才网《<a href="">服务条款</a>》</span></label>
                            <span style="margin-left:100px;"></span>
                        </div>
                        <input id="mc-submit" type="submit" value="提交资料">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        var corpForm = document.getElementById('corpForm');
        var mcInfors = corpForm.getElementsByClassName('mc-infor');
        var inforcompany = document.getElementById('inforcompany');
        var inforaddress = document.getElementById('inforaddress');
        var inforfamily = document.getElementById('inforfamily');
        var inforcheck = document.getElementById('inforcheck');
        var mciJob = document.getElementById('mci-job');
        var mcSubmit = document.getElementById('mc-submit');
        var inforPhoneNum = document.getElementById('inforphoneNum');
        inforcompany.onblur = checkInforcompany;
        function checkInforcompany(){
            var spanObj = mcInfors[0].lastElementChild;
            if(inforcompany.value==''){
                spanObj.innerHTML = '请输入企业名称全称';
                spanObj.style.color = '#f00';
            } else{
                spanObj.innerHTML = '该公司名称可以被注册！';
                spanObj.style.color = '#C7C7C7';
            }
        }
        inforaddress.onblur = checkInforaddress;
        function checkInforaddress(){
            var spanObj = mcInfors[2].lastElementChild;
            if(inforaddress.value==''){
                spanObj.innerHTML = '请输入公司所在地址';
                spanObj.style.color = '#f00';
            } else{
                spanObj.innerHTML = '通过信息验证！';
                spanObj.style.color = '#C7C7C7';
            }
        }
        inforfamily.onblur = checkInforfamily;
        function checkInforfamily(){
            var spanObj = mcInfors[3].lastElementChild;
            if(inforfamily.value==''){
                spanObj.innerHTML = '请输入联系人的姓名';
                spanObj.style.color = '#f00';
            } else if(inforfamily.value.length<2){
                spanObj.innerHTML = '姓名支持2-6中文字';
                spanObj.style.color = '#f00';
            }else{
                spanObj.innerHTML = '通过信息验证！';
                spanObj.style.color = '#C7C7C7';
            }
        }
        mciJob.onblur = checkMciJob;
        function checkMciJob(){
            var spanObj = mcInfors[6].lastElementChild;
            if(mciJob.value==''){
                spanObj.innerHTML = '请输入招聘职位';
                spanObj.style.color = '#f00';
            } else{
                spanObj.innerHTML = '通过信息验证！';
                spanObj.style.color = '#C7C7C7';
            }
        }
        inforcheck.onblur = checkInforcheck;
        function checkInforcheck(){
            var spanObj = document.getElementsByClassName('mc-bottom')[0].lastElementChild;
            if(!inforcheck.checked){
                spanObj.innerHTML = '请选择！';
                spanObj.style.color = '#f00';
            } else{
                spanObj.innerHTML = '通过信息验证！';
                spanObj.style.color = '#C7C7C7';
            }
        }
        inforPhoneNum.onblur = checkInforPhoneNum;
        function checkInforPhoneNum(){
            var spanObj = document.getElementsByClassName('mc-bottom')[3].lastElementChild;
            if(inforPhoneNum.value=''){
                spanObj.innerHTML = '号码格式不正确';
                spanObj.style.color = '#f00';
            } else{
                spanObj.innerHTML = '通过信息验证！';
                spanObj.style.color = '#C7C7C7';
            }
        }
        corpForm.onsubmit = function(e){
            if(inforcompany.value==''||inforaddress.value==''||inforfamily.value==''||mciJob.value==''||!inforcheck.checked){
                e.preventDefault();
                checkInforcompany();
                checkInforaddress();
                checkInforfamily();
                checkMciJob();
                checkInforPhoneNum();
                checkInforcheck();
                return false;
            }
        }
    </script>
</body>
</html>